//表格头部的过滤条件
import { Button, Input, RangePicker, Select, Space } from '@kedacom/react-next'
import useFilterHook from '../servers/filterServer'
import { StyledFilter, StyledButton } from '../styles/style'
import { SearchIcon } from '@/components/Icon'
const FilterView = () => {
	const { filterData, resetData, onExportLog, onFilterSearch, ...useHook } = useFilterHook()
	return (
		<StyledFilter className="log-fliter">
			<Space style={{ flexWrap: 'wrap' }}>
				<Input
					width={useHook.INPUT_WIDTH}
					value={filterData.detail}
					onChange={(e, v) => useHook.onChange(v, 'detail')}
					onEnter={(e, v) => onFilterSearch()}
					placeholder="输入搜索内容"
					maxLength={128}
				/>
				<Input
					width={useHook.INPUT_WIDTH}
					value={filterData.accountName}
					onChange={(e, v) => useHook.onChange(v, 'accountName')}
					onEnter={(e, v) => onFilterSearch()}
					placeholder="输入事件主体名称"
					maxLength={128}
				/>
				<Input
					width={useHook.INPUT_WIDTH}
					value={filterData.nameCodeLevel}
					onChange={(e, v) => useHook.onChange(v, 'nameCodeLevel')}
					onEnter={(e, v) => onFilterSearch()}
					placeholder="输入事件客体名称"
					maxLength={128}
				/>
				<Select
					width={useHook.SELECT_WIDTH}
					value={filterData.logRiskLevel}
					options={useHook.logRiskLevelList}
					height={23}
					placeholder="日志风险级别"
					onChange={(e, val, opt, values) => {
						useHook.onChange(val, 'logRiskLevel')
					}}
					panelMaxItemCount={10}
				/>
				{/* <Select
					width={useHook.SELECT_WIDTH}
					value={filterData.type}
					height={23}
					options={useHook.eventTypeList}
					onChange={(e, val, opt, values) => {
						useHook.onChange(val, 'type')
					}}
					placeholder="事件种类"
					panelMaxItemCount={10}
				/> */}
				<RangePicker
					className="date-picker"
					format="YYYY-MM-DD"
					value={useHook.timeRangValue}
					leftPanelProps={{ placeholder: '开始时间' }}
					rightPanelProps={{ placeholder: '结束时间' }}
					onChange={useHook.onTimeRangChange}
				/>
				<SearchIcon className="search-icon" onClick={() => onFilterSearch()} />
				<StyledButton className="button-log">
					<Space className="button-wrap">
						{useHook.resetButtonShow ? (
							<Button
								onClick={() => {
									resetData()
								}}
							>
								重置
							</Button>
						) : (
							<></>
						)}
						<Button
							onClick={() => {
								useHook.onShowPiechart()
							}}
						>
							统计
						</Button>
						<Button
							onClick={() => {
								onExportLog()
							}}
						>
							导出
						</Button>
					</Space>
				</StyledButton>
			</Space>
		</StyledFilter>
	)
}

export default FilterView
